<template>
    <div class="login-bg">
        <div class="login-form">
            <div class="login-header">用户登录</div>
            <el-form ref="loginRef" :model="loginForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="输入用户名" prefix-icon="user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="输入密码" prefix-icon="lock"
                        show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="form-item-ext">
                        <el-checkbox v-model="loginForm.isRemember">记住我</el-checkbox>
                        <div class="reg">
                            没有账号? <el-link type="primary" :underline="false"
                                @click="$router.push('/register')">立即注册</el-link>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="user.loading" class="login-btn" type="danger"
                        @click="doLogin(loginRef)">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import { getToken } from "@/utils/auth"

export default defineComponent({
    beforeRouteEnter(to, from, next) {
        let token = getToken();
        if (token) {
            next("/chat")
        }
        next();
    }
})
</script>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { encrypt,decrypt } from "@/utils/encrypt"
import { ElMessage } from 'element-plus';
import useUserStore from "@/store/modules/user";
import { useRouter } from 'vue-router';
import Cookie from "js-cookie";
const user = useUserStore();
const router = useRouter();
const loginRef = ref(null);
const registerRef = ref(null);
//登录注册表单信息
let loginForm = reactive({
    username: "",
    password: "",
    isRemember: false,
})
const rules = {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
}

//执行登录
const doLogin = async (login) => {
    user.loading = true;
    if (!login) return;
    await login.validate(async valid => {
        if (valid) {
            //记住账号信息
            if (loginForm.isRemember) {
                Cookie.set("uname", loginForm.username, { expires: 30 })
                Cookie.set("pwd", encrypt(loginForm.password), { expires: 30 })
                Cookie.set("isRemember", loginForm.isRemember, { expires: 30 })
            } else {
                Cookie.remove("uname");
                Cookie.remove("pwd");
                Cookie.remove("isRemember");
            }
            let res = await user.login(loginForm);
            if (res.code === 200) {
                ElMessage.success(res.msg);
                
                router.push("/chat");
            } else {
                ElMessage.error(res.msg);
            }
        } else {
            console.error("校验失败登录");
        }
    })
}

const getCookie = () => {
    const username = Cookie.get("uname");
    const password = Cookie.get("pwd");
    const rememberMe = Cookie.get("isRemember");

    loginForm.username = username || loginForm.username;
    loginForm.password = password ? decrypt(password) : loginForm.password;
    loginForm.isRemember = rememberMe ? Boolean(rememberMe) : loginForm.isRemember;
}

onMounted(()=>{
    getCookie();
})

</script>
<style lang="scss" scoped>
@import "@/assets/style/login.scss";
</style>